<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
        </header>
        <div class="content">
            <van-tabs v-model:active="active" @change="onChange">
                <van-tab title="全部"></van-tab>
                <van-tab title="待付款"></van-tab>
                <van-tab title="已付款"></van-tab>
            </van-tabs>
            <van-empty v-if="list.length == 0"
                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="暂无订单" />
            <div v-else v-for="item in list" :key="item.id" @click="$router.push('/myorder/detail/' + item.id)">
                <van-swipe-cell>
                    <div style="display:flex;justify-content: space-between;margin:10px;font-size:14px;">
                        <h4>订单号:{{ item.title }}</h4>
                        <div v-if="item.status == 1">订单状态:待支付</div>
                        <div v-if="item.status == 2">订单状态:已支付</div>
                    </div>
                    <van-card v-for="el in item.orderList" :key="el.id" :num="el.count" :price="el.price"
                        :title="el.title" :thumb="el.image">
                    </van-card>
                    <h5 style="text-align: right;margin:10px;">订单总金额:
                        <span style="color:red;">{{ item.price }}元</span>
                    </h5>
                </van-swipe-cell>
            </div>
        </div>
    </div>
</template>
<script>
import { useCounterStore } from '@/stores/counter'
import { ref, onMounted } from 'vue'
export default {
    setup() {
        const store = useCounterStore()
        const active = ref(0)
        const list = ref([])
        const onChange = (index) => {
            if (index == 0) {
                list.value = store.myorderList
                return
            }
            list.value = store.myorderList.filter(el => el.status == index) // index 为1时，对应status为未付款
        }
        onMounted(() => {
            onChange(0)
        })
        return {
            store,
            active,
            list,
            onChange
        }
    }
}
</script>